<template>
  <view class="search-container">
   <view class="search-box" @click="search">
     <input type="text" v-model="searchQuery" placeholder="搜索内容，姓名" />
   </view>
   <view class="add-btn" @click="del">
      <text class="icon-add">清空日志</text>
    </view>
      <view class="filter-container">
        <view class="filter" @click="bindFilterTap">
          <text :class="{ active: currentFilter === '全部' }" data-filter="全部">全部</text>
          <text :class="{ active: currentFilter === '系统' }" data-filter="系统">系统</text>
          <text :class="{ active: currentFilter === '用户' }" data-filter="用户">用户</text>
          <text :class="{ active: currentFilter === '文章' }" data-filter="文章">文章</text>
          <text :class="{ active: currentFilter === '其他' }" data-filter="其他">其他</text>
        </view>
    </view>
 </view>
 <view class="main-admin bg-admin">
   <view class="admin-comm-list">
     <view>
       <view class="load text-grey">共有{{ dataList.total }}条符合条件记录</view>


       <view class="item" v-for="(item, index) in dataList.list" :key="item._id">
         <view class="no">{{ index + 1 }}</view>
         <view class="header">
           <view class="left text-cut">{{ item.ADMIN_Class }}</view>
         </view>
    
         <view class="info title-mid">
           <view class="info-item">
             <view class="title">操作人</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_NAME }}</view>
           </view>
    
           <view class="info-item">
             <view class="title">操作时间</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_TIME }}</view>
           </view>
    
           <view class="info-item">
             <view class="title">操作内容</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_CONTENT }}</view>
           </view>
    
           <view class="info-item">
             <view class="title">IP地址</view>
             <view class="mao">：</view>
             <view class="content">{{ item.ADMIN_IP || '未填写' }}</view>
           </view>
         </view>
       </view>
    
       <import src="../../../tpls/public/list_load_tpl.wxml" />
       <template is="listLoadTpl" :data="dataList" />
     </view>

   </view>
 </view>
</template>

<script setup>
import { ref } from 'vue';
import { adminGetLog,
		 adminGetLogClassify,
		 adminDeleteLog,
		 adminGetadminByToken,
		 adminSearchLog,
		 } from '@/request/api.js';
import {
		onLoad
	} from '@dcloudio/uni-app';
const dataList = ref({
  total: 0,
  list: []
});
const currentFilter = ref('全部'); // 初始化当前过滤器为空
const searchQuery =ref('')
onLoad(async (e) => {
  if(e.search!=undefined){
    currentFilter.value='';
    searchQuery.value=e.search;
    adminSearchLog({
		content:e.search
	  }).then(res=>{
      if (Array.isArray(res.data.data)) {
      dataList.value.total = res.data.data.length;
      dataList.value.list = res.data.data.map(item => ({
        ADMIN_NAME: item.operationPersonnel,
        ADMIN_TIME: item.operationTime,
        ADMIN_CONTENT: item.operationDetails,
        ADMIN_IP: item.ip,
        ADMIN_Class: item.operationClass
      }));
    }
  })
  }else{
    getLog();
  }
	});
function bindFilterTap(event) {
  const filterType = event.target.dataset.filter;
  if (filterType !== undefined) {
    console.log("被点击的过滤器:", filterType);
    adminGetLogClassify({
      classify: filterType
    }).then((res) => {
      if (Array.isArray(res.data.data)) {
        dataList.value.total = res.data.data.length;
        dataList.value.list = res.data.data.map(item => ({
          ADMIN_NAME: item.operationPersonnel,
          ADMIN_TIME: item.operationTime,
          ADMIN_CONTENT: item.operationDetails,
          ADMIN_IP: item.ip,
          ADMIN_Class: item.operationClass
        }));
      }
    });
  }
  currentFilter.value = filterType; // 更新当前过滤器
}


function search() {
  uni.redirectTo({
    url: '/pages/admin/mgr/log/search/admin_mgr_search'
  });
}
function getLog(){
  adminGetLog().then((res) => {
    if (Array.isArray(res.data.data)) {
      dataList.value.total = res.data.data.length;
      dataList.value.list = res.data.data.map(item => ({
        ADMIN_NAME: item.operationPersonnel,
        ADMIN_TIME: item.operationTime,
        ADMIN_CONTENT: item.operationDetails,
        ADMIN_IP: item.ip,
        ADMIN_Class: item.operationClass
      }));
    }
  });
}
function del() {
  adminGetadminByToken({
    token:uni.getStorageSync('adminToken')
  }).then((res) => {
    if(res.data.data.position==1){
      wx.showModal({
    title: '清空日志',
    content: '您确定要清空所有日志吗？',
    success(res) {
      if (res.confirm) {
        adminDeleteLog().then((res) => {
            console.log(res)
            if (res.data.code === 200) {
              uni.showToast({
                title: '清空成功',
                icon: 'none'
              });
              getLog();
            }
        });
      }
    }
  });
    }else{
      uni.showToast({
        title: '您没有权限',
        icon: 'none'
      });
    }
  });

}
</script>

<style scoped>
.main-admin {
 /* width: 100%; */
 padding: 30rpx 20rpx;
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-start;
 box-sizing: border-box;
 margin-bottom: 100rpx;
 background-color: #cecece33;
}
.admin-comm-list {
 width: 100%;
 /* padding: 0rpx 20rpx 0rpx; */
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
}
.load.text-grey {
 color: #999 !important;
}
.admin-comm-list .item {
 /* width: 100%; */
 flex-direction: column;
 align-items: center;
 justify-content: flex-start;
 background-color: #fff;
 border-radius: 5rpx;
 overflow: hidden;
 margin-bottom: 30rpx;
 position: relative;
 border: 1rpx solid #ccc;
}
.admin-comm-list .item .no {
 position: absolute;
 bottom: 0;
 right: 10rpx;
 z-index: 99999;
 font-size: 38rpx;
 font-weight: bold;
 color: #ccc;
 opacity: .5;
}
.admin-comm-list .item:last-child {
 margin-bottom: 0;
}


.admin-comm-list .item .header {
 /* width: 100%; */
 font-size: 28rpx;
 text-align: left;
 line-height: 2.6;
 padding: 0 15rpx;
 display: flex;
 background-color: #f2f2f2;
 justify-content: space-between;
 align-items: center;
}
.admin-comm-list .item .header .left {
 flex: 1;
 font-size: 29rpx;
 text-align: left;
 line-height: 2.6;
 padding: 0 5rpx;
 text-align: left;
 font-weight: bold;
}
.admin-comm-list .item .header .right {
 min-width: 100rpx;
 text-align: right;
}
.admin-comm-list .item .info {
 width: 100%;
 flex-direction: column;
 align-items: flex-start;
 justify-content: flex-start;
 background-color: #fff;
 min-height: 150rpx;
 padding: 15rpx 20rpx 30rpx;
 position: relative;
}
.admin-comm-list .item .info .info-item {
 width: 100%;
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
 background-color: #fff;
 line-height: 1.5;
 font-size: 26rpx;
 margin-bottom: 20rpx;
}
.admin-comm-list .item .info.title-mid .info-item .title {
 width: 150rpx;
 display: flex;
}
.admin-comm-list .item .info .info-item .title {
 width: 110rpx;
 color: #333;
 text-align: right;
 font-weight: bold;
}
.admin-comm-list .item .info .info-item .mao {
 color: #333;
 text-align: left;
 margin-right: 10rpx;
}
.admin-comm-list .item .info .info-item .content {
 flex: 1;
 /* color: #555; */
 display: flex;
 justify-content: flex-start;
 align-items: flex-start;
 display: flex;
 flex-wrap: wrap;
}
.text-red {
 color: var(--adminRedColor) !important;
}
.title {
 font-weight: bold; /* 字体加粗 */
}
.text-red {
 color: red !important; /* 字体颜色设置为红色 */
}
.content.text-bold.text-red {
 font-weight: bold; /* 字体加粗 */
}
.text-green {
 color: #008000; /* 标准的绿色 */
}
.text-red {
 color: red; /* 红色 */
}
.oprt {
 display: flex;
 justify-content: center;
 margin-top: 20px;
}

.btn {
 display: flex;
 align-items: center;
 padding: 8px 12px;
 border-radius: 4px;
 background-color: #f0f0f0;
 color: #333;
 margin-right: 10px;
 cursor: pointer;
 transition: background-color 0.3s;
}

.btn:hover {
 background-color: #e0e0e0;
}

.icon-edit, .icon-roundclose, .icon-delete {
 margin-right: 6px;
}

.text-orange {
 color: #f56c6c;
}

.text-red {
 color: red;
}

/* 特定操作按钮的样式 */
.btn-edit {
 color: #409eff;
}

.btn-status {
 color: #67c23a;
}

.btn-delete {
 color: #f56c6c;
}

/* 当鼠标悬停在按钮上时的样式 */
.btn-edit:hover {
 background-color: #409eff;
 color: #fff;
}

.btn-status:hover {
 background-color: #67c23a;
 color: #fff;
}

.btn-delete:hover {
 background-color: #f56c6c;
 color: #fff;
}
.load.text-grey {
 font-size: 14px; /* 设置字体大小 */
 color: #909399; /* 设置字体颜色为浅灰色 */
 text-align: center; /* 文本居中 */
 margin-bottom: 15px; /* 与下方元素的间距 */
 line-height: 1.5; /* 行高，增加阅读体验 */
}


.search-container {
 /* display: flex; */
 justify-content: space-between;
 align-items: center;
 margin-top: 7px; /* 距离顶部5px */
 padding-left: 10px; /* 距离左边10px */
 max-height: 77px;
}

.search-box {
 flex-grow: 1;
 display: flex;
 align-items: center;
 border: 1px solid #dcdfe6; /* 边框颜色 */
 border-radius: 4px; /* 圆角 */
 padding: 0px 15px; /* 内边距调整为更紧凑 */
 background-color: #fff; /* 背景色 */
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
 max-width: 202px; /* 设置搜索框的最大宽度 */
}

.search-box input {
 flex-grow: 1;
 border: none;
 padding: 6px 0;
 font-size: 14px; /* 字体大小 */
 color: #606266; /* 字体颜色 */
}

.search-box button {
 padding: 0 10px;
 background-color: #2196F3; /* 按钮背景色 */
 color: #fff; /* 字体颜色 */
 border: none;
 border-radius: 4px; /* 圆角 */
 cursor: pointer;
 font-size: 14px; /* 字体大小 */
 outline: none; /* 移除焦点轮廓 */
}

.search-box button:hover {
 background-color: #1e88e5; /* 鼠标悬停时的背景色 */
}

.add-btn {
 padding: 6px 10px;
 background-color: #2196F3; /* 按钮背景色 */
 color: #fff; /* 字体颜色 */
 border: none;
 border-radius: 4px; /* 圆角 */
 cursor: pointer;
 font-size: 14px; /* 字体大小 */
 outline: none; /* 移除焦点轮廓 */
 max-width: 86px;
 position: relative;
 top: -35px;
 left: 246px;
}

.add-btn:hover {
 background-color: #1e88e5; /* 鼠标悬停时的背景色 */
}

.icon-add {
 margin-right: 5px; /* 图标与文本间距 */
 font-size: 16px; /* 图标大小 */
 margin-left: 11px;
}


/* 分类 */
.filter-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  position: relative;
  top: -16px;
  left: -58px;
}

.filter {
  display: flex; /* 水平排列 */
}

.filter text {
  margin: 0 10px; /* 每个文本之间的间距 */
  cursor: pointer; /* 鼠标悬停时的手势 */
  transition: color 0.3s; /* 颜色变化的过渡效果 */
}
.filter text.active {
  color: #2196F3; /* 被选中的文本颜色为蓝色 */
}
</style>